<template>
    <div class="changeNode">
    <el-dialog :visible="isShow" width="500px" :before-close="handleClose">
    <el-row>
    <el-col :span="12"  class="nodeInfo">
        <el-row>
            <el-col :span="8">节点名:</el-col>
            <el-col :span="16">{{this.node.nodeName}}</el-col>
        </el-row>
         <el-row>
            <el-col :span="8"> 点类型：</el-col>
            <el-col :span="16">{{this.node.nodeType}}</el-col>
        </el-row>
        <el-row>
            <el-col :span="8"> 父节点：</el-col>
            <el-col :span="16">{{this.node.parentName}}</el-col>
        </el-row>
        <el-row>
            <el-col :span="8"> 子节点</el-col>
            <el-col :span="16">{{this.node.children?this.node.children.map((item)=>{return item.nodeType+"--"+item.nodeName}):"无"}}</el-col>
        </el-row>
    </el-col>
    <el-col v-if="addShow==1" :span="12"  class="nodeOprate">
        <el-button type="primary" @click="addShow=2" v-if="this.node.nodeType!='权限属性节点'" icon="el-icon-plus" circle></el-button>
        <el-button type="info" @click="addShow=3" v-if="this.node.nodeType=='权限属性节点'" icon="el-icon-edit" circle></el-button>
        <el-button type="danger" @click="deleteNode()" v-if="this.node.children.length==0" icon="el-icon-delete" circle></el-button>
    </el-col>
    <el-col v-else-if="addShow==2" :span="12"  class="addChild">
        <h3>添加子节点</h3>
        <el-form label-position="top" :model="addForm" ref="addForm" :rules="rules" label-width="80px">
            <el-form-item size="mini" label="选择节点" prop="nodeName">
                <el-select  placeholder="选择孩子节点" v-model="addForm.id" >
                    <el-option v-for="item in otherChildList" :label="item.pageName||item.conponentName||item.componentPermissionName" :value="item.pageId||item.conponentId||item.componentPermissionId" :key="item.pageId||item.conponentId||item.componentPermissionId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="this.node.nodeType=='组件'"  size="mini" label="设置状态">
                <el-input v-model="addForm.value"></el-input>
            </el-form-item>
            <!-- <el-row class="detail">
            </el-row> -->
            <el-row class="addNodeBtn">
                <el-button
                class="my_btn"
                size="small"
                @click="addShow=1"
                >取 消</el-button
                >
                <el-button
                class="my_btn"
                size="small"
                type="primary"
                @click="addChild('addForm')"
                >确 定</el-button
                >
            </el-row>
        </el-form>
    </el-col>
        <el-col v-else-if="addShow==3" :span="12"  class="addChild">
        <h3>编辑属性值</h3>
        <el-form label-position="top" label-width="80px">
            <el-form-item size="mini" label="当前状态">
                <el-input ></el-input>
            </el-form-item>
            <el-row class="addNodeBtn">
                <el-button
                class="my_btn"
                size="small"
                @click="addShow=1"
                >取 消</el-button
                >
                <el-button
                class="my_btn"
                size="small"
                type="primary"
                >确 定</el-button
                >
            </el-row>
        </el-form>
    </el-col>
    </el-row>
    </el-dialog>
    </div>
</template>
<script>
import {getOtherChildNode,addChildNode,deleteNode} from "@/api/api"
export default {
    name:"ChangeNode",
    props:[
       "node",
       "allNode", 
    ],
    data(){
        return {
        addShow:1, //1:打开添加界面
        stateShow:false,
        otherChildList:[],
        addForm:{
           id:"",
           value:""
        },
        rules: {
            id: [
            { required: true, message: "请选择节点名称", trigger: "blur" },
            ]
      }
      }
    },
    watch:{
      addShow(newV){
         if(newV==2){
           this.getChildNodeList()
         }
      }
    },
    computed:{
        isShow(){
            return this.$store.state.rolePermission.dialogPermissionVisible
        }
    },
    methods:{
    //弹窗关闭按钮事件
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
         this.$store.commit("rolePermission/changeDialogPermissionVisible")
        })
        .catch(() => {});
    },
    //获取当前节点下，可添加的子节点
    async getChildNodeList(){
        const param={
            nodeId:this.node.nodeId,
        }
       await getOtherChildNode(param).then((data)=>{
          this.otherChildList=data.data
       })
    },
    async addChild(formName){
        console.log(this.addForm)
        this.$refs[formName].validate(async (valid) => {
        if (valid) {
        const param={
            nodeId:this.node.nodeId,
            id:this.addForm.id,
            nodeType:this.node.nodeType,
            value:this.addForm.value
        }
        await addChildNode(param).then((data)=>{
            if(data.code==0){
                console.log("添加成功")
                this.$emit('reGetData');
            }
            this.addShow=1
            this.addForm.id=""
        })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async deleteNode(){
       if(this.node.children||this.node.children.length==0){
           await deleteNode({nodeId:this.node.nodeId}).then((data)=>{
               if(data.code==0){
                this.$message({
                   type:"success",
                   message:data.detail
               })
               this.$emit('reGetData');
               this.$store.commit("rolePermission/changeDialogPermissionVisible")
               }else{
                 this.$message({
                   type:"info",
                   message:data.data.detail
               })
               }
           })
       }else{
           this.$message({
                   type:"info",
                   message:"该节点还有子节点，不能删除"
               })
       }
    },
    }
}
</script>script
<style lang="scss" scoped> 
    .nodeInfo{
        height: 300px;
        border-right: 1px dashed #000;
    }
    .nodeOprate{
        height: 300px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap:wrap;
        padding:90px 60px 90px 60px;
    }
    // .detail{
    // border: 1px dotted rgba($color: #000000, $alpha: 0.5);
    // height: 80px;
// }
    .addChild{
        height: 300px;
        padding: 10px;
        .addNodeBtn{
            display: flex;
            justify-content: space-between;
            align-content: center;
        }
    }
</style>>
<style lang="scss">
   .changeNode{
  /**element-ui弹出框样式重写 */
  .el-dialog {
    border-radius: 5px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden;
    .el-dialog__header {
      border-bottom: 1px solid rgba($color: #000, $alpha: 0);
      padding: 0 !important;
      .el-dialog__headerbtn {
        top: 0px !important;
        right: 0px !important;
        width: 30px;
        height: 30px;
        box-shadow: 0 0px 0px rgba(0, 0, 0, 0) !important;
      }
    }
  }
  .el-row{
      margin: 10px!important;
      .el-button{
          margin: 0px!important;
      }
  }
   }

</style>>